<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<base href="http://edu.bluej.cn/public/uploads/20181120/20181120200858work_template/work_template/"><br><title></title>
	</head>
<body>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
       .father{
           width: 400px;
           height: 400px;
           display: flex;
           justify-content: space-around;
           align-items: center;
       }

       .son{
           width: 70px;  
           height: 30px;  
           line-height: 30px;     
           text-align: center;
         
         
          
       }
        a{
          display: block;
          font-size: 18px;
          width: 70px;
          position:relative;
       }
       
      

     
      a::after{
        content: "";
            display: block;  
            width: 0px;
            height: 1px;
             position: absolute;
            top: 100%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: black;
            transition: all 1s;
      }

      a:hover::after{
        width: 54px;
        height: 1px;
      }

      
    </style>
    <div class="father" >
        <div class="son"><a>我是一</a></div>    
        <div class="son"><a>我是二</a></div>
        <div class="son"><a>我是三</a></div>
        <div class="son"><a>我是四</a></div>
    </div>
</body>
</html>